<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"  content="width=device-width,initial-scale=1,maximum-scale=1, user-scalable=no,">
    <!-- uc浏览器强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ浏览器强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC浏览器强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ浏览器强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC浏览器应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ浏览器应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <title>首页</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <link href="css/base.css" rel="stylesheet">
    <link href="css/all.css" rel="stylesheet">
    <style>
    </style>
</head>
<body class="bg-gray">
  <!-- public Header start-->
<header class="public-header">
    <div class="public-header-content clearfixed">
        <a href="javascript:history.back()" class="btn btn-back">
        </a>
        <h1>贷款计算器</h1>
    </div>
</header>
<!-- public Header end-->
<!--production-detial-->
<section class="production-detial" style="padding: 0"></section>


<!--tab-section-->
<section class="tab-section mt-10">
    <div class="tabcon">
        <ul id="tab" class="tab-list">
            <li class="tab-item">商业贷款</li>
            <li class="tab-item cur">提前还款</li>
            <li class="tab-item  ">房贷担保费</li>
            <li class="tab-item">个人贷款</li>
        </ul>
        <div id="tabContent" class="tab_content">
         
            <div class="tab-item-w mt-10">
                <form action="##">               
                 <table style="width: 100%;">
                   <tr>
                         <td class="tr">
                             贷款总额：
                         </td>
                         <td>
                              <div class="dd-ipt-div1 border-all">
                                <input class="pl-5" type="text" name="">
                              </div>  
                        </td>
                        <td class="pl-10">万元</td>   
                    </tr> 
                      <tr>
                         <td class="tr">
                             原贷款期限：
                         </td>
                         <td>
                              <div class="dd-ipt-div1 border-all">
                                  <select class="selectStyle">
                                            <option>请选择</option>
                                            <option>14-11-22基准利率 1.2倍</option>
                                            <option>12-07-06基准利率 1.15倍</option>
                                            <option>12-06-08基准利率1.1倍</option>
                                            <option>14-11-22基准利率 1.2倍</option>
                                            <option>14-11-22基准利率 1.2倍</option>
                                            <option>14-11-22基准利率 1.2倍</option>
                                            <option>14-11-22基准利率 1.2倍</option>
                                    </select>
                              </div>  
                        </td>
                        <td class="pl-10">年</td>   
                    </tr>    
                    <tr>
                         <td class="tr">
                             利率：
                         </td>
                         <td>
                              <div class="dd-ipt-div1 border-all">
                                     <select class="selectStyle">
                                             <option>请选择</option>
                                            <option>2年（24期） 3年（36期）</option>
                                            <option>4年（48期） 5年（60期）</option>
                                            <option>6年（72期）7年（84期）</option>
                                            <option>8年（96期）9年（108期）</option>
                                            <option>10年（120期）11年（132期）</option>                                           
                                    </select>
                              </div>  
                        </td>
                        <td class="pl-10"></td>   
                    </tr>     
                      <tr>
                         <td class="tr">
                             第一还款时间：
                         </td>
                         <td>
                           <div style="width: 190px">
                              <div class="dd-ipt-div1 border-all float-l" style="width: 35%;">
                                  <select class="selectStyle">
                                        <option>请选择</option>
                                        <option>2012</option>
                                        <option>2012</option>
                                        <option>2012</option>
                                        <option>2015</option>                                                                  
                                    </select>
                                
                              </div>  
                              <span class="float-l pl-5 pr-5" style="line-height: 30px">年</span> 
                               <div class="dd-ipt-div1 border-all  float-l" style="width: 35%;">
                                      <select class="selectStyle">
                                       <option>请选择</option>
                                        <option>11</option>
                                        <option>6</option>
                                        <option>2</option>
                                        <option>5</option>                                                                  
                                    </select>                            
                              </div> 
                                 <span class="float-l pl-5 pr-5" style="line-height: 30px">年</span>
                               </div>
                        </td>
                        <td class="pl-10"></td>   
                    </tr>
                     <tr>
                         <td class="tr">
                            预计还款时间：
                         </td>
                         <td>
                           <div style="width: 190px">
                              <div class="dd-ipt-div1 border-all float-l" style="width: 35%;">
                                     <select class="selectStyle">
                                        <option>请选择</option>
                                        <option>2012</option>
                                        <option>2012</option>
                                        <option>2012</option>
                                        <option>2015</option>                                                                  
                                    </select>           
                              </div>  
                              <span class="float-l pl-5 pr-5" style="line-height: 30px">年</span> 
                               <div class="dd-ipt-div1 border-all  float-l" style="width: 35%;">
                                      <select class="selectStyle">
                                       <option>请选择</option>
                                        <option>11</option>
                                        <option>6</option>
                                        <option>2</option>
                                        <option>5</option>                                                                  
                                    </select>                                       
                              </div> 
                                 <span class="float-l pl-5 pr-5" style="line-height: 30px">年</span>
                               </div>
                        </td>
                        <td class="pl-10"></td>   
                    </tr>
                     <tr>
                         <td class="tr" style="vertical-align: top;">
                            贷款类型：
                         </td>
                         <td>
                           <div class="pl-5" style="width: 204px">
                                <p class="mb-10"><label><input name="tp" type="radio" value="" />公积金贷款</label></p>
                                <p class="mb-10"><label><input name="tp" type="radio" value="" />商业性贷款</label></p>
                                <p class="mb-10"><label><input name="tp" type="radio" value="" />一次提前还清</label></p>
                                <div class="mb-10">
                                   <p class="float-l" style="width: 95px; "><label><input name="tp" type="radio" value="" />           部分提前还款<span style="font-size:0.8rem; ">(不含当月应还款额)</span></label>
                                   </p>
                                   <div class="dd-ipt-div1 border-all  float-l ml-10" style="width: 25%;">
                                      <input class="pl-5" type="text" name="">                               
                                    </div> 
                                    <span class="float-l pl-5 pr-5" style="line-height: 30px">万元</span> 
                                </div>
                        
                         </div>
                        </td>
                        <td class="pl-10"></td>   
                    </tr>
                     <tr>
                         <td class="tr" style="vertical-align: top;">
                           处理方式：
                         </td>
                         <td>
                           <div class="pl-5" style="width: 204px">
                                <p class="mb-10"><label><input name="tp" type="radio" value="" />缩短还款年限，月还款额基本不变</label></p>
                                <p class="mb-10"><label><input name="tp" type="radio" value="" />减少月还款额，还款期不变</label></p>
                               
                               
                        
                         </div>
                        </td>
                        <td class="pl-10"></td>   
                    </tr>
                 </table>
                <div class="ui-btn-box ">
                    <span class="float-l start-btn">开始计算</span>
                 <span class="float-r reset-btn">重置</span>
                </div>
                 </form>
            </div>       
          
              <div class="tab-item-w mt-20">  
                 <h4>计算结果</h4>            
                <div class="inputText-box mt-10 ">
                    <div class="dd-ipt-div1 tr">原月还款额：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>
                 <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">原最后还款期：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>  
                 <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">已还款总额：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">已还利息额：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>  
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">该月一次还款额：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>         
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">下月期月还款额：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>         
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">节省利息支出：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>         
                  <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">计算结果提示：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>   
                <div class="inputText-box mt-10">
                    <div class="dd-ipt-div1 tr">新的最后还款期：</div>
                    <div class="dd-ipt-div1 border-all"><input class="pl-5" type="text" name=""></div>
                    <div class="dd-ipt-div1"><span class="pl-10">元</span></div>
                </div>                           

            </div>
        </div>
    </div>

   
</section>


<!--footer-->
<footer class="public-footer">
    <p>版权所有广州融策投资顾问有限公司 </p>
    <p>©2012-2015 &nbsp;&nbsp;&nbsp;&nbsp;粤ICP备13050490号</p>
</footer>
<script src="js/jquery.js" type="text/javascript"></script>
<script type="text/javascript" src="js/plugin.jquery.js"></script>
<script src="js/swiper.jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" src="js/privateAll.js"></script>
<script type="text/javascript">
// $('#tab').myTab({parent:'#tabContent',index : 0});
</script>
</body>
</html>